import React from 'react'
import { useLocation, useParams } from 'react-router-dom'
import qs from 'qs'

export default function Music() {

  /* query */
  const { search } = useLocation()
  const { album } = qs.parse(search.split('?')[1])

  /* path */
  const { author } = useParams()
  
  /* state */
  const musicList = useLocation().state

  return (
    <div>
      <h3>music</h3>
      <h5>专辑: {album} 作者: {author}</h5>
      {
        musicList.map(item => {
          return <p key={item.id}>{item.music}</p>
        })
      }
    </div>
  )
}
